<!--问题整改 en_std_ann_pro_rectify  annualProblemRectify-->
<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row class="query-form">
                <Col span="8">
                    <FormItem label="集团名称：">
                        <!--<cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>-->
                        <Select class='w' placeholder="集团名称"  v-model='dataToQuery.twoLevelOrgId'>
                            <Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="整改年度：" prop="year" >
                        <DatePicker class="query-form-el" type="year" v-model="dataToQuery.year1" :clearable="false"
                                    @on-change="()=>{if(dataToQuery.year1 instanceof Date){dataToQuery.year = dataToQuery.year1.getFullYear().toString()}}"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label='是否整改完成：' prop='ifRecitify'>
                        <Select v-model='dataToQuery.ifRecitify' class='query-form-el'>
                            <Option value="1">是</Option>
                            <Option value="0">否</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="企业名称：" prop="belongOrgId">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8" offset="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <download-button :api="exportUrl" :queryForm="dataToQuery" />
                    <!-- <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportDetails">导出</Button> -->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal :title="mode ==='view'? '问题整改详情':'问题整改'" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=800 :styles="{height:'auto'}"  class-name='limit-height-dialog' >
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?120:null">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="二级集团：" prop="belongOrgId">
                                    <!--<div v-if="mode === 'view'">{{dataToView.belongOrgName}}</div>-->
                                    <Input class="query-form-el" v-model="dataToView.belongOrgName" disabled/>

                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label="企业名称：" prop="companyId">
                                    <!--<div v-if="mode === 'view'">{{dataToView.companyName}}</div>-->
                                    <Input class="query-form-el" v-model="dataToView.companyName" disabled/>
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="整改年度：" prop="year" >
                                    <!--<div v-if="mode === 'view'">{{dataToView.year}}</div>-->
                                    <DatePicker type="year" placeholder="请输入" disabled v-model="dataToView.yearDate"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label="问题数量：" prop="allRectifyNumber" >
                                    <div v-if="mode === 'view'">{{dataToView.allRectifyNumber}}</div>
                                    <InputNumber v-else :min="1" style="width: 100%" disabled v-model="dataToView.allRectifyNumber" ></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label="已整改数量：" prop="rectifyNumber" >
                                    <div v-if="mode === 'view'">{{dataToView.rectifyNumber}}</div>
                                    <InputNumber v-else :min="1" :max="dataToView.allRectifyNumber" style="width: 100%" v-model="dataToView.rectifyNumber" ></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="初次提交整改附件：">
                                    <div v-show="dataToView.idFiles.filter(t=>t.field!=='1').length>0" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field!=='1')">
                                        <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                                        <Progress  v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem v-if="mode === 'view'" label="二次整改附件：">
                                    <div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')">
                                        <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                                        <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                    </div>
                                </FormItem>
                                <FormItem v-else label="二次整改附件：" prop="idFiles">
                                    <div>
                                        <Upload ref="报告附件"
                                                :before-upload="(file) => { beforeUpload1(file, 'id', 'guideFile/1') }"
                                                :show-upload-list="true"
                                                :max-size="10240"
                                                multiple
                                                type="drag"
                                                :action="fileUrl">
                                            <div style="padding: 10px">
                                                <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                                <p>点击将文件拖拽到这里上传</p>
                                                <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                                            </div>
                                        </Upload>
                                    </div>
                                    <div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')">
                                        <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                                        <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'guideFile/1')" style="margin-left: 5px;margin-bottom: 3px"/>
                                        <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                        <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23" >
                                <FormItem label="整改描述：" prop="notes" >
                                    <div v-if="mode === 'view'">{{dataToView.notes}}</div>
                                    <Input v-else v-model="dataToView.notes" type="textarea" :rows="2" />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label="整改负责人：" prop="rectifyCharge" >
                                    <div v-if="mode === 'view'">{{dataToView.rectifyCharge}}</div>
                                    <Input v-else type="text" v-model="dataToView.rectifyCharge" ></Input>
                                </FormItem>
                            </Col>
                            <Col span="11"></Col>
                        </Row>

                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary" :loading="pageStatus.sending" class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>

    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        name: "AnnProRectify",
        components:{cascaderDom},
        data(){
            return{
                ...this.createCommonDataField(),
                fileUrl:Api.interestedPartiesUserFile,
                columns1: [
                    { title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRenderSum},
                    {title: '是否整改完成', minWidth:90, align: 'center', key:'allRectifyNumber',
                        render: (h, params) => {
                            if (params.index == 0) {return;}
                            return h('span',{style: {color: params.row.allRectifyNumber && params.row.allRectifyNumber=== params.row.rectifyNumber?'green':'red'}},
                                params.row.allRectifyNumber && params.row.allRectifyNumber=== params.row.rectifyNumber?'是':'否')}},
                    {title: '整改年度', minWidth:90, align: 'center', key:'year',},
                    {title: '所属二级集团', align: 'center', key:'belongOrgName', minWidth: 180,},
                    {title: '企业名称', align: 'center', key:'companyName', minWidth: 200,},
                    {title: '问题数量', minWidth:90, align: 'center', key:'allRectifyNumber',},
                    {title: '已整改数量', minWidth:100, align: 'center', key:'rectifyNumber',},
                    {title: '未整改数量', minWidth:100, align: 'center', key:'noRectifyNumber',},
                    // {title: '整改描述', width: 230, align: 'center', key:'notes', tooltip:true},
                    {title: '整改负责人', width: 100, align: 'center', key:'rectifyCharge',},
                    {title: '填报人', width: 80, align: 'center', key:'createUserName'},
                    {title: '填报时间', width: 120, align: 'center', key:'createDate', render: this.renderCellDate},
                    // {title: '二级集团环保负责人', minWidth: 120, align: 'center', key:'chargeUserName',},
                    // {title: '审批意见', minWidth: 120, align: 'center', key:'approvalNotes', tooltip:true},
                    // this.getActionColumns()
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            if (params.index == 0) {return;}
                            const enable = this.currentUser.loginId === this.Common.admin || this.currentUser.userId === params.row.createUserId ||this.currentUser.userRole.find(obj => obj.roleId == 'e6512254eace4c7da4b6e22688e452d2') != undefined || this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined;
                            return h('div', [
                                h('A', {
                                    props: {type: 'primary', size: 'small'},
                                    style: {
                                        fontSize: '14px',
                                        color: (params.row.allRectifyNumber && params.row.allRectifyNumber=== params.row.rectifyNumber)&&enable?'#c5c8ce':'',
                                        pointerEvents:(params.row.allRectifyNumber && params.row.allRectifyNumber=== params.row.rectifyNumber)&&enable?'none':''},
                                    on: {
                                        click: () => {
                                            // if (this.currentUser.companyId === params.row.companyId) {
                                                this.$router.push({path: '/problemRectifyDetails', query: {id: params.row.checkRecorderId,type:1}});
                                            // } else {
                                            //     this.$Message.error("不是 "+params.row.companyName+" 人员，不可参与整改")
                                            // }
                                        }
                                    }
                                }, '整改'),
                            ]);
                        }
                    }
                ],
                ruleCustom : {
                    companyId: [{ required: true, message: ' ', trigger: 'blur' }],
                    rectifyNumber: [{ required: true, message: ' ', trigger: 'blur',type:'number' }],
                    chargeUserId: [{ required: true, message: ' ', trigger: 'blur' }],
                    idFiles: [{
                        validator: (rule, value, callback) => {
                            if (this.dataToView.idFiles.filter(t=>t.field==='1').length < 1) {
                                callback('附件必须上传')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }]
                },
                // api
                queryUrl:Api.queryAnnProRectify,
                updateUrl:Api.updateAnnProRectify,
                exportUrl:Api.exportAnnProRectify,
                twoLevel:[],
            }
        },
        mounted() {
            this.dataToQuery.year1 = new Date()
            this.dataToQuery.year = new Date().getFullYear().toString()
            this.setTableHeight();
            this.query();
            this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
                this.twoLevel=res.data.data
            })
        },
        methods:{
            ...pageCommonFunction,
            exportDetails(){
                // this.dataToQuery.approval = '2'
                this.exportFormSubmit()
            },
            query() {
                // if(this.dataToQuery.year) {
                //     this.dataToQuery.year = this.dataToQuery.year.getFullYear();
                // }
                // this.dataToQuery.approval = '2'
                this.queryAjax()
            },
            submit(name) {
                if(this.dataToView.yearDate) {
                    this.dataToView.year = this.dataToView.yearDate.getFullYear();
                }
                this.submitAjax(name);
            },

            async beforeEditDialogOpen(data) {
                data.row.yearDate = new Date(data.row.year + '-01-01');
            },
            async afterDataToViewInit() {
                await this.getFiles('id');
            }
        },
        watch:{
        },

    }
</script>

<style lang='css' scoped>
    .ivu-form-item {
        padding-right: 20px;
    }

    .query-form-el, .ivu-date-picker, .ivu-input-wrapper {
        width: 100%;
    }
</style>
